import React, {useEffect, useRef} from 'react'
import BasicThead from "../../../../../../shared-components/Tables/BasicThead/BasicThead";
import {WingBlank, WhiteSpace,} from "antd-mobile";
import NoDataPage from "../../../../../game/Football/NoDataPage/NoDataPage";

export const formatEuroOdds = (array) => {
    let sorted = [...array].sort((a, b) => a - b)
    let ts = ['胜', '平', '负',]
    let first = array.findIndex(i => i === sorted[0])
    let second = array.findIndex(i => i === sorted[1])

    let result = `首选 ${ts[first]} 次选 ${ts[second]}`
    return result
}

const EuroOddsTable = props => {

    const {
        data,
        originData,
    } = props

    const ctnContent = useRef(null)

    useEffect(() => {

        if (data.length > 0) {
            props.setContentCtn(ctnContent.current, props.bindScrollEvent)
        }

    }, [data,])

    if (data.length === 0) return <NoDataPage/>

    const colorStyle = (n1, n2) => {
        if (n1 === n2) {
            return
        }
        return {
            color: n1 > n2 ? '#FA7268' : '#009904',
        }
    }

    const dataEntries = Object.entries(originData)
    let allFirstOddsList = []
    let allLatestOddsList = []

    dataEntries.map(obj => {
        let [company, dataArr] = obj
        let l = dataArr.length
        let first = dataArr[l - 1].slice(2,5)
        let latest = dataArr[0].slice(2,5)
        allFirstOddsList.push(first)
        allLatestOddsList.push(latest)
    })

    const tbodyData = data

    // 排序 低 => 高
    // 初盘主赢排序
    // [主赢初盘, 平初盘, 客赢初盘, 主赢即时盘, 平即时盘, 客赢即时盘,]
    let homeWinFirstSortedArr = [...tbodyData].sort((arr1, arr2) => arr1[1] - arr2[1])
    // 初盘平
    let tiedFirstSortedArr = [...tbodyData].sort((arr1, arr2) => arr1[2] - arr2[2])
    // 初盘客赢
    let awayWinFirstSortedArr = [...tbodyData].sort((arr1, arr2) => arr1[3] - arr2[3])

    // 即时盘主赢
    let homeWinLiveSortedArr = [...tbodyData].sort((arr1, arr2) => arr1[4] - arr2[4])
    // 即时盘 平
    let tiedLiveSortedArr = [...tbodyData].sort((arr1, arr2) => arr1[5] - arr2[5])
    // 即时盘客赢
    let awayWinLiveSortedArr = [...tbodyData].sort((arr1, arr2) => arr1[6] - arr2[6])

    let homeWinOddsFirstLowest = homeWinFirstSortedArr[0] && homeWinFirstSortedArr[0][1]
    let homeWinOddsFirstHighest = homeWinFirstSortedArr[homeWinFirstSortedArr.length - 1] && homeWinFirstSortedArr[homeWinFirstSortedArr.length - 1][1]
    let homeWinOddsFirstAverage = (allFirstOddsList.reduce((acc, cur) => (acc + cur[0]), 0) / allFirstOddsList.length).toFixed(2)

    let tiedOddsFirstLowest = tiedFirstSortedArr[0] && tiedFirstSortedArr[0][2]
    let tiedOddsFirstHighest = tiedFirstSortedArr[tiedFirstSortedArr.length - 1] && tiedFirstSortedArr[tiedFirstSortedArr.length - 1][2]
    let tiedOddsFirstAverage = (allFirstOddsList.reduce((acc, cur) => (acc + cur[1]), 0) / allFirstOddsList.length).toFixed(2)

    let awayWinOddsFirstLowest = awayWinFirstSortedArr[0] && awayWinFirstSortedArr[0][3]
    let awayWinOddsFirstHighest = awayWinFirstSortedArr[awayWinFirstSortedArr.length - 1] && awayWinFirstSortedArr[awayWinFirstSortedArr.length - 1][3]
    let awayWinOddsFirstAverage = (allFirstOddsList.reduce((acc, cur) => (acc + cur[2]), 0) / allFirstOddsList.length).toFixed(2)

    let homeWinOddsLiveLowest = homeWinLiveSortedArr[0] && homeWinLiveSortedArr[0][4]
    let homeWinOddsLiveHighest = homeWinLiveSortedArr[homeWinLiveSortedArr.length - 1] && homeWinLiveSortedArr[homeWinLiveSortedArr.length - 1][4]
    let homeWinOddsLiveAverage = (allLatestOddsList.reduce((acc, cur) => (acc + cur[0]), 0) / allLatestOddsList.length).toFixed(2)

    let tiedOddsLiveLowest = tiedLiveSortedArr[0] && tiedLiveSortedArr[0][5]
    let tiedOddsLiveHighest = tiedLiveSortedArr[tiedLiveSortedArr.length - 1] && tiedLiveSortedArr[tiedLiveSortedArr.length - 1][5]
    let tiedOddsLiveAverage = (allLatestOddsList.reduce((acc, cur) => (acc + cur[1]), 0) / allLatestOddsList.length).toFixed(2)

    let awayWinOddsLiveLowest = awayWinLiveSortedArr[0] && awayWinLiveSortedArr[0][6]
    let awayWinOddsLiveHighest = awayWinLiveSortedArr[awayWinLiveSortedArr.length - 1] && awayWinLiveSortedArr[awayWinLiveSortedArr.length - 1][6]
    let awayWinOddsLiveAverage = (allLatestOddsList.reduce((acc, cur) => (acc + cur[2]), 0) / allLatestOddsList.length).toFixed(2)
    const highest = (
        <tr>
            <td style={{borderRight: '2px solid #f5f5f9', textAlign: 'center', fontSize: '14px',}}>
                最高值
            </td>
            <td>
                <p>初盘</p>
                <p>即盘</p>
            </td>
            <td>
                {/*<p style={colorStyle(homeWinOddsFirstHighest, homeWinOddsLiveHighest)}>{homeWinOddsFirstHighest}</p>*/}
                <p>{homeWinOddsFirstHighest}</p>
                <p style={colorStyle(homeWinOddsLiveHighest, homeWinOddsFirstHighest)}>{homeWinOddsLiveHighest}</p>
            </td>
            <td>
                {/*<p style={colorStyle(tiedOddsFirstHighest, tiedOddsLiveHighest)}>{tiedOddsFirstHighest}</p>*/}
                <p>{tiedOddsFirstHighest}</p>
                <p style={colorStyle(tiedOddsLiveHighest, tiedOddsFirstHighest)}>{tiedOddsLiveHighest}</p>
            </td>
            <td>
                {/*<p style={colorStyle(awayWinOddsFirstHighest, awayWinOddsLiveHighest)}>{awayWinOddsFirstHighest}</p>*/}
                <p>{awayWinOddsFirstHighest}</p>
                <p style={colorStyle(awayWinOddsLiveHighest, awayWinOddsFirstHighest)}>{awayWinOddsLiveHighest}</p>
            </td>
        </tr>
    )

    const tableHighest = <table className='basic-table' style={{marginBottom: '4px',}}>
        <tbody>
        {highest}
        </tbody>
    </table>

    const lowest = (
        <tr>
            <td style={{borderRight: '2px solid #f5f5f9', textAlign: 'center', fontSize: '14px',}}>
                最低值
            </td>
            <td>
                <p>初盘</p>
                <p>即盘</p>
            </td>
            <td>
                {/*<p style={colorStyle(homeWinOddsFirstLowest, homeWinOddsLiveLowest)}>{homeWinOddsFirstLowest}</p>*/}
                <p>{homeWinOddsFirstLowest}</p>
                <p style={colorStyle(homeWinOddsLiveLowest, homeWinOddsFirstLowest)}>{homeWinOddsLiveLowest}</p>
            </td>
            <td>
                {/*<p style={colorStyle(tiedOddsFirstLowest, tiedOddsLiveLowest)}>{tiedOddsFirstLowest}</p>*/}
                <p>{tiedOddsFirstLowest}</p>
                <p style={colorStyle(tiedOddsLiveLowest, tiedOddsFirstLowest)}>{tiedOddsLiveLowest}</p>
            </td>
            <td>
                {/*<p style={colorStyle(awayWinOddsFirstLowest, awayWinOddsLiveLowest)}>{awayWinOddsFirstLowest}</p>*/}
                <p>{awayWinOddsFirstLowest}</p>
                <p style={colorStyle(awayWinOddsLiveLowest, awayWinOddsFirstLowest)}>{awayWinOddsLiveLowest}</p>
            </td>
        </tr>
    )

    const tableLowest = <table className='basic-table'  style={{marginBottom: '4px',}}>
        <tbody>
        {lowest}
        </tbody>
    </table>

    const average = (
        <tr>
            <td style={{borderRight: '2px solid #f5f5f9', textAlign: 'center', fontSize: '14px',}}>
                平均值
            </td>
            <td>
                <p>初盘</p>
                <p>即盘</p>
            </td>
            <td>
                {/*<p style={colorStyle(homeWinOddsFirstAverage, homeWinOddsLiveAverage)}>{homeWinOddsFirstAverage}</p>*/}
                <p>{homeWinOddsFirstAverage}</p>
                <p style={colorStyle(homeWinOddsLiveAverage, homeWinOddsFirstAverage)}>{homeWinOddsLiveAverage}</p>
            </td>
            <td>
                {/*<p style={colorStyle(tiedOddsFirstAverage, tiedOddsLiveAverage)}>{tiedOddsFirstAverage}</p>*/}
                <p>{tiedOddsFirstAverage}</p>
                <p style={colorStyle(tiedOddsLiveAverage, tiedOddsFirstAverage)}>{tiedOddsLiveAverage}</p>
            </td>
            <td>
                {/*<p style={colorStyle(awayWinOddsFirstAverage, awayWinOddsLiveAverage)}>{awayWinOddsFirstAverage}</p>*/}
                <p>{awayWinOddsFirstAverage}</p>
                <p style={colorStyle(awayWinOddsLiveAverage, awayWinOddsFirstAverage)}>{awayWinOddsLiveAverage}</p>
            </td>
        </tr>
    )

    const tableAverage = <table className='basic-table'>
        <tbody>
        {average}
        </tbody>
    </table>

    // let all

    const tHead2 = [
        {title: '公司', dataIndex: 'company',},
        {title: '', dataIndex: 'dish',},
        {title: '主胜', dataIndex: 'host',},
        {title: '平局', dataIndex: 'tied',},
        {title: '客胜', dataIndex: 'away',},
    ]

    const tbody2 = tbodyData.map((dataArr, index) => {
       return (
           <tr key={index}
           >
               {tHead2.map((data, index) => {

                   if (index === 0) {
                       return <td key={index}><p>{dataArr[0]}</p></td>
                   }

                   if (index === 1) {
                       return <td key={index}><p>初盘</p><p>即时盘</p></td>
                   }

                   if (index > 1) {

                       const first = dataArr[index - 1]
                       const latest = dataArr[index + 1 + 1]

                       return <td key={index}>
                           <p>{first}</p>
                           {/*<p style={colorStyle(first, latest)}>{first}</p>*/}
                           <p style={colorStyle(latest, first)}>{latest}</p>
                       </td>
                   }

               })}
           </tr>
       )
    })


    const table2 = (
        <table className='basic-table basic-table-e' >
            <BasicThead tHead={tHead2}/>
            <tbody>
                {tbody2}
            </tbody>
        </table>
    )


    return <div ref={ctnContent}>
        <WingBlank>
            {tableHighest}
            {tableLowest}
            {tableAverage}
            <WhiteSpace/>
        </WingBlank>
        <WingBlank>
            {table2}
        </WingBlank>
    </div>

}

export default EuroOddsTable
